<!-- 父组件 -->
<template>
  <div id="parent">
    <button @click="changeName('李四')">修改姓名</button>
    <!-- 把父组件的name传递给子组件 -->
    <!-- 把父组件的changeName方法，子组件通过$listeners获取方法 -->
    <child :name="name" v-on="{ changeName }"></child>
  </div>
</template>

<script>
// 引入子组件Child
import Child from './child'
export default {
  components: { Child },
  data() {
    return {
      name: '张三',
    }
  },
  methods: {
    // 修改姓名，并传递给子组件、子孙组件使用，用$listeners获取方法
    changeName(newName) {
      this.name = newName
      console.log(this.name)
    },
  },
}
</script>

<style lang="scss" scoped></style>
